<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <!--<github-corner class="github-corner" />-->
    <!--
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="8" :xs="24" />

        <el-col :span="16" :xs="24" />
      </el-row>
    </el-card>
	-->
    <el-row :gutter="20" mt-1>
      <el-col :span="7">
        <el-card>
          <el-carousel height="130px" motion-blur>
            <el-carousel-item v-for="item in bannerData" :key="item">
              <el-image :src="item.img" fit="fill" />
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card style="height: 170px">
          <div v-for="item in shortcutData" :key="item.id" class="menu_btn">
            <el-link :href="item.route" :underline="false">
              <el-avatar shape="square" :class="item.class_name">
                <el-icon
                  v-if="item.icon && item.icon.startsWith('el-icon')"
                  class="sub-el-icon"
                  size="20"
                >
                  <component :is="item.icon.replace('el-icon-', '')" />
                </el-icon>
                <svg-icon
                  size="20"
                  v-else-if="item.icon"
                  :icon-class="item.icon"
                />
                <svg-icon size="20" v-else icon-class="menu" />
              </el-avatar>
              <span>{{ item.permission_name }}</span>
            </el-link>
          </div>
          <div class="menu_btn">
            <el-link href="javascript:;" :underline="false" @click="openDialog">
              <el-avatar shape="square" icon="Plus" class="info" />
              <span>添加</span>
            </el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" mt-3>
      <el-col :span="7">
        <el-card>
          <el-link
            :underline="false"
            href="#/office/launch"
            style="
              color: var(--el-text-color-primary);
              font-size: 16px;
              font-weight: bold;
            "
          >
            审批 <el-icon ml-1><ArrowRight /></el-icon>
          </el-link>
          <el-tabs
            v-model="actionTab"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane name="dealt">
              <template #label>
                <el-badge
                  v-if="doTaskNum > 0"
                  :offset="[10, 5]"
                  :value="doTaskNum"
                  class="item"
                  >待办</el-badge
                >
                <span v-if="doTaskNum == 0">待办</span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="抄送我" name="copy" />
            <el-tab-pane label="已发起申请" name="launch" />
          </el-tabs>
          <div v-for="(item, index) in doTaskData" :key="index">
            <p style="padding: 0; margin: 8px 0">
              {{ item.title }} &nbsp;
              <el-tag
                v-if="item.urgency_name"
                :key="item.urgency_name"
                :type="item.color"
                effect="plain"
                round
              >
                {{ item.urgency_name }}
              </el-tag>
              <el-tag v-if="item.status_d" size="small">{{
                item.status_d
              }}</el-tag>
            </p>
            <div class="do-task-info">
              <el-avatar :size="32" :src="item.avatar" mr-1 mb-1 />
              <span class="do-task-name">
                {{ item.nickname }}
                <span
                  class="ellipsis"
                  style="color: var(--el-color-info); font-size: 12px"
                  v-if="item.reason"
                >
                  {{ item.reason }}
                </span>
              </span>
              <span class="do-task-day" v-if="item.end_day">
                {{ item.end_day }}
              </span>
              <span class="do-task-day" v-if="item.org_name">
                {{ item.org_name }}
              </span>
            </div>
            <el-divider style="margin: 0; padding: 0" />
          </div>
          <el-empty
            v-if="isShowTask"
            description="暂无数据"
            :image-size="120"
          />
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card>
          <el-descriptions title="公告" :column="1">
            <el-descriptions-item v-for="item in noticeData" :key="item.id">
              <template #label>
                <div class="cell-item" style="font-size: 16px">
                  <el-link :href="url + item.id">
                    <el-icon size="small"><CaretLeft /></el-icon>
                    {{ item.title }}
                  </el-link>
                </div>
              </template>
              <span
                style="margin: 0; font-size: 12px; color: var(--el-color-info)"
                >{{ item.created_at }}</span
              >
            </el-descriptions-item>
          </el-descriptions>
          <el-empty
            v-if="noticeData"
            description="暂无数据"
            :image-size="120"
          />
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                {{ context }}
              </p>
            </div>
          </div>
          <el-calendar ref="calendar">
            <template #header="{ date }">
              <!--<span>Custom header content</span>-->
              <span>{{ date }}</span>
              <el-button-group>
                <el-button size="small" @click="selectDate('prev-month')">
                  <el-icon><ArrowLeft /></el-icon>
                </el-button>
                <el-button size="small" @click="selectDate('today')"
                  >今日</el-button
                >
                <el-button size="small" @click="selectDate('next-month')">
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </el-button-group>
            </template>
            <template #date-cell="{ data }">
              {{ data.day.split("-").slice(1)[1] }}
              <span v-for="item in scheduleData" :key="item.id">
                <el-tooltip
                  :content="item.html"
                  :raw-content="true"
                  effect="light"
                >
                  <div
                    v-if="
                      new Date(data.day).getDate() >=
                        new Date(item.start_time).getDate() &&
                      new Date(data.day).getMonth() ==
                        new Date(item.start_time).getMonth() &&
                      new Date(data.day).getDate() <=
                        new Date(item.end_time).getDate()
                    "
                    class="el-calendar-day-current-c"
                    :style="{ backgroundColor: item.color }"
                  ></div>
                </el-tooltip>
              </span>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
    >
      <el-transfer
        v-model="rightNav"
        style="text-align: left; display: inline-block"
        filterable
        :titles="['待选菜单', '已选菜单']"
        :button-texts="['移除', '添加']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="leftNav"
      />
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handelSubmitMenu">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { CalendarDateType, CalendarInstance, ElLoading } from "element-plus";
import { getDoTaskLst } from "@/api/doTask";
import { DoTaskPage } from "@/api/doTask/types";
import { getSchedule } from "@/api/schedules";
import { SchedulePage } from "@/api/schedules/types";
import { getNoticeLst } from "@/api/notice";
import { NoticePage } from "@/api/notice/types";
import { getDashboard } from "@/api/resources";
import { ResourcesPage } from "@/api/resources/types";
import { getShortcutMenu, shortcutMenu, getMyShortcutMenu } from "@/api/menu";
import { Shortcut, MenuVO } from "@/api/menu/types";
const url = ref("#/message/details?id=");
const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
const doTaskData = ref<DoTaskPage[]>(); // 待办数据
const doTaskNum = ref(0);
const isShowTask = ref(false);
const scheduleData = ref<SchedulePage[]>(); // 日程数据
const noticeData = ref<NoticePage[]>(); // 公告
const userStore = useUserStore();
const date: Date = new Date();
const actionTab = ref("dealt");
const leftNav = ref<Shortcut[]>();
const rightNav = ref<[]>();
const bannerData = ref<ResourcesPage[]>();
const shortcutData = ref<MenuVO[]>();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 2 && hours < 5) {
    return "凌晨了，该休息了！注意身体！😪";
  } else if (hours >= 6 && hours < 8) {
    return "早晨，开始全新的一天！😊";
  } else if (hours >= 8 && hours < 12) {
    return "😄上午好，" + userStore.user.nickname;
  } else if (hours >= 12 && hours < 18) {
    return "💪下午好，" + userStore.user.nickname;
  } else if (hours >= 18 && hours < 24) {
    return "👉晚上好，" + userStore.user.nickname;
  } else {
    return "深夜了，注意休息💢";
  }
});

const queryTabParams = reactive({
  type: "dealt",
});

const context = computed(() => {
  const contexts: string[] = [
    "奋斗不止，进步无止境，让人生在追求中焕发光彩。",
    "砥砺前行不畏惧，奋发向前不停息。成就自己，铸就辉煌人生。",
    "梦想如星辰，点亮黑暗，照亮前行的路。",
    "驾驭命运的舵是。不抱有一丝幻想，不放弃一点机会，不停止一日努力。",
    "积极进取，永不言败，步履踏实，铸就辉煌。",
    "奋斗不止，勇往直前，让成功成为必然。",
    "梦想是人生的太阳，它指引着前行的方向，让我们无惧困难，勇往直前。",
  ];

  return contexts[Math.floor(Math.random() * contexts.length)];
});
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 800,
  title: "自定义快捷菜单",
});
async function openDialog() {
  dialog.visible = true;
  getShortcutMenu()
    .then(({ data }) => {
      leftNav.value = data.left_nav;
      rightNav.value = data.right_nav;
    })
    .finally(() => {});
}
function closeDialog() {
  dialog.visible = false;
}
function handelSubmitMenu() {
  const loading = ElLoading.service({
    lock: true,
    text: "保存中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  shortcutMenu({ menu_id: rightNav.value })
    .then(() => {
      loading.close();
      closeDialog();
      shortcutMenuQuery();
      ElMessage.success("修改成功");
    })
    .finally(() => {
      loading.close();
    });
}
async function getBannerQuery() {
  getDashboard()
    .then(({ data }) => {
      bannerData.value = data;
    })
    .finally(() => {});
}

async function shortcutMenuQuery() {
  getMyShortcutMenu()
    .then(({ data }) => {
      shortcutData.value = data;
    })
    .finally(() => {});
}

const handleClick = (tab: any, event: any) => {
  queryTabParams.type = tab.props.name;
  handleDoTaskQuery();
};

function handleDoTaskQuery() {
  getDoTaskLst(queryTabParams)
    .then(({ data }) => {
      doTaskData.value = data;
      if (queryTabParams.type == "dealt") {
        doTaskNum.value = data.length;
      }
      isShowTask.value = data.length === 0 ? true : false;
    })
    .finally(() => {});
}

function handleNoticeQuery() {
  getNoticeLst()
    .then(({ data }) => {
      noticeData.value = data;
    })
    .finally(() => {});
}

/** 查询 */
function handleScheduleQuery() {
  getSchedule()
    .then(({ data }) => {
      scheduleData.value = data;
    })
    .finally(() => {});
}
/*
// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "message",
    title: "消息",
    key: "message",
  },
  {
    value: 50,
    iconClass: "todolist",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "project",
    title: "项目",
    key: "project",
  },
]);
*/
onMounted(() => {
  handleDoTaskQuery();
  handleScheduleQuery();
  handleNoticeQuery();
  getBannerQuery();
  shortcutMenuQuery();
});
</script>

<style lang="scss" scoped>
::v-deep(.el-calendar-table .el-calendar-day) {
  padding: 8px 2px 4px;
  height: 40px;
  text-align: center;
  font-size: 12px;
  position: relative;
  .el-calendar-day-current-c {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    bottom: 2px;
    right: 42%;
    border: 0;
  }
}

.dashboard-container {
  position: relative;
  padding: 24px;
  .do-task-name {
    margin-left: 5px;
    position: absolute;
    left: 42px;
    top: 5px;
  }
  .do-task-day {
    float: right;
    margin-top: 14px;
    color: var(--el-color-info);
    font-size: 12px;
  }
  .do-task-info {
    align-items: center;
    vertical-align: middle;
    justify-content: left;
    position: relative;
  }
  .schedules-single {
    display: inline-block;
    font-size: 10px;
    margin-top: 20%;
  }
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
  .box-card {
    text-align: center;
    font-size: 12px;
  }
  .menu_btn {
    display: inline-block;
    font-size: 14px;
    margin-left: 0;
    padding: 10px 55px 10px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
  }
  .sky-blue {
    background-color: #3fc2f7;
  }
  .deep-blue {
    background-color: #4752e8;
  }
  .e158a6 {
    background-color: #e158a6;
  }
  .d6c1 {
    background-color: #33d6c1;
  }
  .purple {
    background-color: rgb(179, 127, 235);
  }
  .blue {
    background: #409eff;
  }
  .green {
    background-color: #67c23a;
  }
  .red {
    background-color: #f56c6c;
  }
  .yellow {
    background-color: #e6a23c;
  }
  .menu_btn span {
    margin-left: 8px;
  }
  .menu_btn:hover {
    background-color: #f2f2f2;
  }
  .el-link:hover {
    color: #000000;
  }
  .carousel-item {
    color: #475669;
    opacity: 0.75;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    display: flex;
    align-items: center;
    margin: 0;
    text-align: center;
    height: 100%;
  }
}
</style>
